<script>
// 添加关系型数据源弹框主体部分
export default {
  name: 'RelationDataAdd',
  props: {
    formItem: {
      type: Object,
      default: () => {
        return {
          MSSQLUseIntegratedSecurity: false,
          access: 0,
          databaseName: '',
          extraOptions: [],
          hostname: '',
          lowerCaseIdentifiersCheck: false,
          name: '',
          password: '',
          port: '',
          quoteIdentifiersCheck: false,
          streamingResults: true,
          supportBooleanDataType: true,
          type: 'POSTGRESQL',
          upperCaseIdentifiersCheck: false,
          username: '',
        };
      },
    },
    isDisable: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      ruleInline: {
        name: [{ required: true, message: '该字段不能为空', trigger: 'blur' }],
        type: [{ required: true, message: '该字段不能为空', trigger: 'change' }],
        hostname: [{ required: true, message: '该字段不能为空', trigger: 'blur' }],
        databaseName: [{ required: true, message: '该字段不能为空', trigger: 'blur' }],
        username: [{ required: true, message: '该字段不能为空', trigger: 'blur' }],
        password: [{ required: true, message: '该字段不能为空', trigger: 'blur' }],
        port: [{ required: true, message: '该字段不能为空', trigger: 'blur' }],
      },
    };
  },
};
</script>

<template>
  <Form
    ref="fm"
    :model="formItem"
    :rules="ruleInline"
    :label-width="120"
  >
    <Form-item
      label="数据库连接名"
      prop="name"
    >
      <Input
        v-model="formItem.name"
        :disabled="isDisable"
        placeholder="请输入"
      />
    </Form-item>
    <Form-item
      label="数据库类型"
      prop="type"
    >
      <Select
        v-model="formItem.type"
        placeholder="请选择"
      >
        <Option value="POSTGRESQL">PostgreSQL</Option>
        <Option value="MYSQL">My SQL</Option>
        <Option value="ORACLE">Oracle</Option>
        <Option value="MSSQLNATIVE">MS SQL Server (Native)</Option>
      </Select>
    </Form-item>
    <Form-item
      label="主机名称"
      prop="hostname"
    >
      <Input
        v-model="formItem.hostname"
        placeholder="请输入"
      />
    </Form-item>
    <Form-item
      label="数据库名称"
      prop="databaseName"
    >
      <Input
        v-model="formItem.databaseName"
        placeholder="请输入"
      ></Input>
    </Form-item>
    <Form-item
      label="用户名"
      prop="username"
    >
      <Input
        v-model="formItem.username"
        placeholder="请输入"
      />
    </Form-item>
    <Form-item
      label="密码"
      prop="password"
    >
      <Input
        v-model="formItem.password"
        type="password"
        placeholder="请输入"
      />
    </Form-item>
    <Form-item
      label="端口号"
      prop="port"
    >
      <Input
        v-model="formItem.port"
        placeholder="请输入"
      />
    </Form-item>
    <Form-item
      class="iSwitch"
      label="区分大小写"
    >
      <Switch
        v-model="formItem.quoteIdentifiersCheck"
        size="large"
      >
        <span slot="open">是</span>
        <span slot="close">否</span>
      </Switch>
    </Form-item>
    <Form-item
      class="iSwitch"
      label="支持boolean类型"
    >
      <Switch
        v-model="formItem.supportBooleanDataType"
        size="large"
      >
        <span slot="open">是</span>
        <span slot="close">否</span>
      </Switch>
    </Form-item>
    <Form-item
      class="iSwitch"
      label="小写检查"
    >
      <Switch
        v-model="formItem.lowerCaseIdentifiersCheck"
        size="large"
      >
        <span slot="open">是</span>
        <span slot="close">否</span>
      </Switch>
    </Form-item>
    <Form-item
      class="iSwitch"
      label="大写检查"
    >
      <Switch
        v-model="formItem.upperCaseIdentifiersCheck"
        size="large"
      >
        <span slot="open">是</span>
        <span slot="close">否</span>
      </Switch>
    </Form-item>
  </Form>
</template>

<style lang="less" scoped>
.k-form {
  margin-right: 15px;
  height: 450px;

  .k-form-item {
    margin-bottom: 20px;
  }

  .iSwitch {
    width: 220px;
    float: right;
  }
}
</style>
